﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
<style>
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .modal-content {
        background: white;
        border-radius: 8px;
        padding: 0;
        width: 600px;
        max-width: 90%;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    }
    .modal-header {
        padding: 15px 20px;
        border-bottom: 1px solid #e6e6e6;
        background: #f8f9fa;
        border-radius: 8px 8px 0 0;
        position: relative;
    }
    .modal-header h3 {
        margin: 0;
        font-size: 16px;
        color: #333;
    }
    .modal-close {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
        color: #999;
    }
    .modal-close:hover {
        color: #333;
    }
    .modal-body {
        padding: 20px;
    }
    .modal-footer {
        padding: 15px 20px;
        border-top: 1px solid #e6e6e6;
        text-align: right;
        background: #f8f9fa;
        border-radius: 0 0 8px 8px;
    }
    .form-row {
        display: flex;
        margin-bottom: 15px;
        align-items: center;
    }
    .form-row .layui-form-label {
        width: 100px;
        text-align: right;
        padding-right: 15px;
        color: #333;
    }
    .form-row .layui-input-block {
        margin-left: 0;
        flex: 1;
    }
    .form-row .layui-input-inline {
        width: auto;
        flex: 1;
        margin-right: 10px;
    }
    .auto-generate-container {
        display: flex;
        align-items: center;
    }
    .auto-generate-container .layui-input {
        flex: 1;
        margin-right: 10px;
    }
    .layui-form-switch {
        margin: 0;
    }
    .frequency-container {
        display: flex;
        align-items: center;
    }
    .frequency-container .layui-input {
        width: 60px;
        margin-right: 10px;
    }
    .frequency-container .frequency-unit {
        color: #666;
    }
</style>
<body>
    <div class="modal-overlay" id="addMaintenanceModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>添加计划</h3>
                <button class="modal-close" onclick="closeModal()">&times;</button>
            </div>
            <div class="modal-body">
                <form class="layui-form" id="addMaintenanceForm">
                    @Html.AntiForgeryToken()
                    <!-- 计划编码 -->
                    <div class="form-row">
                        <label class="layui-form-label"><span style="color: red;">*</span>计划编码</label>
                        <div class="layui-input-block">
                            <div class="auto-generate-container">
                                <input type="text" id="planCode" name="planCode" placeholder="请输入计划编码" autocomplete="off" class="layui-input">
                                <div class="layui-form-switch-text">
                                    <input type="checkbox" id="autoGenerate" lay-skin="switch" lay-text="自动生成|手动输入" lay-filter="autoGenerate">
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 计划名称 -->
                    <div class="form-row">
                        <label class="layui-form-label"><span style="color: red;">*</span>计划名称</label>
                        <div class="layui-input-block">
                            <input type="text" id="planName" name="planName" placeholder="请输入计划名称" autocomplete="off" class="layui-input" lay-verify="required">
                        </div>
                    </div>
                    
                    <!-- 计划类型 -->
                    <div class="form-row">
                        <label class="layui-form-label"><span style="color: red;">*</span>计划类型</label>
                        <div class="layui-input-block">
                            <select id="planType" name="planType" lay-verify="required">
                                <option value="">请选择计划类型</option>
                                <option value="项目点检">项目点检</option>
                                <option value="项目保养">项目保养</option>
                            </select>
                        </div>
                    </div>
                    
                    <!-- 频率 -->
                    <div class="form-row">
                        <label class="layui-form-label"><span style="color: red;">*</span>频率</label>
                        <div class="layui-input-block">
                            <div class="frequency-container">
                                <input type="number" id="frequency" name="frequency" placeholder="1" min="1" class="layui-input" lay-verify="required">
                                <select id="frequencyUnit" name="frequencyUnit" style="width: 80px;">
                                    <option value="小时">小时</option>
                                    <option value="天">天</option>
                                    <option value="周">周</option>
                                    <option value="月">月</option>
                                    <option value="季度">季度</option>
                                    <option value="年">年</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 开始日期 -->
                    <div class="form-row">
                        <label class="layui-form-label">开始日期</label>
                        <div class="layui-input-block">
                            <input type="text" id="startDate" name="startDate" placeholder="请选择开始日期" autocomplete="off" class="layui-input" readonly>
                        </div>
                    </div>
                    
                    <!-- 结束日期 -->
                    <div class="form-row">
                        <label class="layui-form-label">结束日期</label>
                        <div class="layui-input-block">
                            <input type="text" id="endDate" name="endDate" placeholder="请选择结束日期" autocomplete="off" class="layui-input" readonly>
                        </div>
                    </div>
                    
                    <!-- 状态 -->
                    <div class="form-row">
                        <label class="layui-form-label">状态</label>
                        <div class="layui-input-block">
                            <select id="status" name="status" disabled>
                                <option value="草稿" selected>草稿</option>
                                <option value="已确认">已确认</option>
                                <option value="审批中">审批中</option>
                                <option value="已审批">已审批</option>
                                <option value="已完成">已完成</option>
                                <option value="已拒绝">已拒绝</option>
                                <option value="已完成生成工单">已完成生成工单</option>
                            </select>
                        </div>
                    </div>
                    
                    <!-- 备注 -->
                    <div class="form-row">
                        <label class="layui-form-label">备注</label>
                        <div class="layui-input-block">
                            <textarea id="remarks" name="remarks" placeholder="请输入内容" class="layui-textarea" rows="3"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="layui-btn layui-btn-primary" onclick="closeModal()">取消</button>
                <button type="button" class="layui-btn" onclick="saveMaintenance()">保存</button>
            </div>
        </div>
    </div>
</body>
<script src="~/scripts/jquery-3.4.1.min.js"></script>
<script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>
<script>
    layui.use(['form', 'laydate', 'layer'], function(){
        var form = layui.form;
        var laydate = layui.laydate;
        var layer = layui.layer;
        
        // 初始化日期选择器
        laydate.render({
            elem: '#startDate',
            type: 'date',
            format: 'yyyy-MM-dd'
        });
        
        laydate.render({
            elem: '#endDate',
            type: 'date',
            format: 'yyyy-MM-dd'
        });
        
        // 监听自动生成开关
        form.on('switch(autoGenerate)', function(data){
            var planCodeInput = document.getElementById('planCode');
            if(data.elem.checked){
                // 自动生成编码
                planCodeInput.value = generatePlanCode();
                planCodeInput.readOnly = true;
                planCodeInput.style.backgroundColor = '#f5f5f5';
            } else {
                // 手动输入
                planCodeInput.value = '';
                planCodeInput.readOnly = false;
                planCodeInput.style.backgroundColor = '';
            }
        });
        
        // 生成计划编码
        function generatePlanCode() {
            var now = new Date();
            var year = now.getFullYear();
            var month = String(now.getMonth() + 1).padStart(2, '0');
            var day = String(now.getDate()).padStart(2, '0');
            var time = String(now.getHours()).padStart(2, '0') + String(now.getMinutes()).padStart(2, '0');
            return 'PLAN' + year + month + day + time;
        }
        
        window.generatePlanCode = generatePlanCode;
    });
    
    // 关闭弹窗
    function closeModal() {
        window.location.href = '/Maintenance/MaintenanceView';
    }
    
    // 保存维护计划
    function saveMaintenance() {
        // 获取频率值和单位
        var frequencyValue = document.getElementById('frequency').value;
        var frequencyUnit = document.getElementById('frequencyUnit').value;
        var frequencyText = frequencyValue + frequencyUnit;
        
        // 获取表单数据
        var formData = {
            Id: 0,
            Plancode: document.getElementById('planCode').value,
            PlanName: document.getElementById('planName').value,
            PlanType: document.getElementById('planType').value,
            Frequency: frequencyText,
            StartDate: document.getElementById('startDate').value || null,
            EndDate: document.getElementById('endDate').value || null,
            Status: document.getElementById('status').value,
            Remarks: document.getElementById('remarks').value
        };
        
        // 验证必填项
        if (!formData.Plancode) {
            layui.layer.msg('请输入计划编码');
            return;
        }
        if (!formData.PlanName) {
            layui.layer.msg('请输入计划名称');
            return;
        }
        if (!formData.PlanType) {
            layui.layer.msg('请选择计划类型');
            return;
        }
        if (!frequencyValue) {
            layui.layer.msg('请输入频率');
            return;
        }
        
        // 获取防伪令牌
        var token = $('input[name="__RequestVerificationToken"]').val();
        
        // 发送AJAX请求
        $.ajax({
            url: '/Maintenance/AddMaintenance',
            type: 'POST',
            data: formData,
            headers: {
                'RequestVerificationToken': token
            },
            success: function(response) {
                if (response && response > 0) {
                    layui.layer.msg('保存成功', {icon: 1}, function(){
                        window.location.href = '/Maintenance/MaintenanceView';
                    });
                } else {
                    layui.layer.msg('保存失败', {icon: 2});
                }
            },
            error: function(xhr, status, error) {
                layui.layer.msg('网络错误，请稍后重试', {icon: 2});
                console.error('保存失败:', xhr.responseText);
            }
        });
    }
</script>